<div class="flex-horizontal margin-bottom flex-wrap">
    <div>
        Every
    </div>
    <div class="btn-group">
        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span data-bind="text: period"></span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" data-bind="foreach: $root.constructor.periods">
            <li><a href="#" data-bind="click: _.partial($root.period, $data)"><span data-bind="text: $data"></span></a></li>
        </ul>
    </div>
    <div class="dayOfWeek" data-bind="if: dayOfWeekVisible, visible: dayOfWeekVisible">
        on
    </div>
    <div class="dayOfWeek" data-bind="if: dayOfWeekVisible, visible: dayOfWeekVisible">
        <div class="btn-group">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                <span data-bind="text: dayOfWeekLabel"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" data-bind="foreach: $root.constructor.daysOfWeek">
                <li><a href="#" data-bind="click: _.partial($root.dayOfWeek, value)"><span data-bind="text: label"></span></a></li>
            </ul>
        </div>
    </div>
    <div class="dayOfMonth" data-bind="if: dayOfMonthVisible, visible: dayOfMonthVisible">
        on the
    </div>
    <div class="dayOfMonth" data-bind="if: dayOfMonthVisible, visible: dayOfMonthVisible">
        <div class="btn-group">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                <span data-bind="text: dayOfMonth"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" data-bind="foreach: $root.constructor.daysOfMonth">
                <li><a href="#" data-bind="click: _.partial($root.dayOfMonth, $data)"><span data-bind="text: $data"></span></a></li>
            </ul>
        </div>
    </div>
    <div class="month" data-bind="if: monthVisible, visible: monthVisible">
        of
    </div>
    <div class="month" data-bind="if: monthVisible, visible: monthVisible">
        <div class="btn-group">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                <span data-bind="text: monthLabel"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" data-bind="foreach: $root.constructor.months">
                <li><a href="#" data-bind="click: _.partial($root.month, value)"><span data-bind="text: label"></span></a></li>
            </ul>
        </div>
    </div>
    <div class="minutes" data-bind="if: minutesVisible, visible: minutesVisible">
        at
    </div>
    <div class="minutes" data-bind="if: minutesVisible, visible: minutesVisible">
        <div class="btn-group">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                <span data-bind="text: minutes"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" data-bind="foreach: $root.constructor.minutes">
                <li><a href="#" data-bind="click: _.partial($root.minutes, $data)"><span data-bind="text: $data"></span></a></li>
            </ul>
        </div>
    </div>
    <div class="minutes" data-bind="if: minutesVisible, visible: minutesVisible">
        minutes past the hour
    </div>
    <div class="time" style="display: inline" data-bind="if: timeVisible, visible: timeVisible">
        at
    </div>
    <div class="time" style="display: inline" data-bind="if: timeVisible, visible: timeVisible">
        <div class="btn-group">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                <span data-bind="text: hourLabel"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" data-bind="foreach: $root.constructor.hours">
                <li><a href="#" data-bind="click: _.partial($root.hour, value)"><span data-bind="text: label"></span></a></li>
            </ul>
        </div>
    </div>
    <div class="time" style="display: inline" data-bind="if: timeVisible, visible: timeVisible">
        :
    </div>
    <div class="time" style="display: inline" data-bind="if: timeVisible, visible: timeVisible">
        <div class="btn-group">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                <span data-bind="text: minutes"></span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" data-bind="foreach: $root.constructor.minutes">
                <li><a href="#" data-bind="click: _.partial($root.minutes, $data)"><span data-bind="text: $data"></span></a></li>
            </ul>
        </div>
    </div>
    <div class="custom flex-grow" data-bind="visible: textInputVisible">
        <input type="text" class="form-control" data-bind="textInput: targetField" placeholder="Cron expression, e.g. 0 1 * * * - every day at 01:00 AM">
    </div>
    <div data-bind="visible: textInputVisible">
        <i class="icon-info text-info js-schedule-info"></i>
    </div>
</div>
<div>
    <div data-bind="visible: humanReadableVisible">
        <small>
            <span>Description:</span>
            <strong data-bind="text: humanReadable"></strong>
        </small>
    </div>
    <div class="flex-horizontal">
        <div class="flex-start"><small>Estimated next run:</small></div>
        <div>
            <div>
                <small>
                    <strong data-bind="text: nextOccurrenceServerTime"></strong>
                    <span data-bind="if: nextOccurrenceServerTime() !== 'N/A' && canDisplayNextOccurrenceLocalTime()">(Server time)</span>
                </small>
            </div>
            <div class="next-backup-occurrence-local" data-bind="if: canDisplayNextOccurrenceLocalTime">
                <small>
                    <strong data-bind="text: nextOccurrenceLocalTime"></strong>
                    <span data-bind="if: nextOccurrenceLocalTime">(Local time)</span>
                </small>
            </div>
            <div class="next-backup-occurrence-local">
                <small><strong data-bind="text: nextInterval"></strong></small>
            </div>
        </div>
    </div>
</div>
